<template>
  <view class="rh-tabs-container">
    <u-tabs
      bar-style="{width=120rpx}"
      :list="list"
      :scrollable="scrollable"
      lineWidth="40rpx"
      lineHeight="4rpx"
      lineColor="#0003AA"
      :current="currentTab.idx"
      @change="changeTab"
      :itemStyle="{ 'background-color': 'transparent', height: '80rpx' }"
      :activeStyle="{ color: '#0003AA', 'font-size': '28rpx' }"
      :inactiveStyle="{ color: '#333', 'font-size': '28rpx' }"
    ></u-tabs>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    scrollable: {
      type: Boolean,
      default: () => false,
    },
    current: {
      type: [Number, String],
      default: () => 0,
    },
  },
  watch: {
    current(idx) {
      if (idx !== undefined) {
        this.currentTab = this.list[parseInt(idx)];
      }
    },
  },
  data() {
    return {
      currentTab: this.list[parseInt(this.current)],
    };
  },
  methods: {
    changeTab(tab) {
      let _self = this;
      _self.currentTab = this.list[tab.index];
      _self.$emit("change-tab", _self.currentTab);
    },
  },
};
</script>
<style lang='scss' scoped></style>
